<template>
	<view >
		<view class="my-page-content ">
			<view class="my-title mb50">设置出租价格</view>
			<view class="mb20">
				<view class="my-m-title">
					押金
					<span class="grey-s-tips ml20">由平台监管，退房后5-10个工作日内自动退回原支付账户</span>
				</view>
				<view class="mb50">
					<van-field custom-class="my-textare-class" :value="formData.deposit_key" label="钥匙押金"
						placeholder="请输入" @change="changeValue($event,'deposit_key')">
						<span slot="button"> 加元</span>
					</van-field>
				</view>
				<view class="mb20">
					<van-field custom-class="my-textare-class" :value="formData.deposit_damage" label="房损押金"
						placeholder="请输入,建议不超过1晚的房租金额" @change="changeValue($event,'deposit_damage')">
						<span slot="button"> 加元</span>
					</van-field>
				</view>


				<view class="text-right">押金合计{{$formatNumber((Number(formData.deposit_key) + Number(formData.deposit_damage)).toFixed(2))}} 加元</view>
			</view>
			<view>
				<view class="my-m-title">预期收入房租</view>
				<view class="mb30">
					<van-field custom-class="my-textare-class" :value="formData.price" label=" " placeholder="请输入"
						@change="changeValue($event,'price')">
						<span slot="button"> 加元/晚</span>
					</van-field>
					<view>
						<view class="flex-between">
							<view class="my-m-title">对外展示房租</view>
							<view>{{showPrice}}加元/晚</view>
						</view>
						<view class="grey-s-tips text-right">价格包含12%平台服务费,个位数四舍五入</view>
					</view>
					<!-- <view class="price-tips-con">
						<view>
							预估您的收入为
							<span class="price"> {{$formatNumber((formData.price *0.88).toFixed(2))}} 加元 /晚</span>
						</view>
						<view class="f26">{{$formatNumber((formData.price *0.88).toFixed(2)) || 0}}加元 =
							{{$formatNumber(formData.price) || 0}}加元（每晚房租）- {{$formatNumber(formData.price) || 0}}加元
							x12%
							(平台服务费)
						</view>
					</view> -->
					</view>
					</view>
				</view>
			</view>
</template>

<script>
	export default {
		props: {
			dataItem: Object
		},
		watch: {
			'dataItem': {
				handler(n) {
					this.formData = this.dataItem;
					this.showPrice = this.formData.price_public || 0
				},
				deep: true,
				immediate: true,
			}
		},
		data() {
			return {
				formData: {},
				showPrice: 0
			}
		},
		methods: {
			changeValue(e, name) {
				this.formData[name] = Number(e.detail);
				if (name == 'price') {
					this.showPrice = Math.round(this.formData.price * 1.12 / 10) * 10 || '0';
				}
			},
			nextStep() {
				if (!Number(this.formData.deposit_key)) {
					this.$toast('请设置钥匙押金');
					return false;
				}
				if (!Number(this.formData.deposit_damage)) {
					this.$toast('请设置房损押金');
					return false;
				}

				if (!this.formData.price) {
					this.$toast('请设置出租价格');
					return false;
				}
				return this.formData;
			}

		}
	}
</script>

<style lang="scss" scoped>
	.price-tips-con {
		width: 684rpx;
		margin: 80rpx auto;
		background: #FFF8EE;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 1rpx solid #EC8403;
		padding: 36rpx;
		box-sizing: border-box;
		line-height: 50rpx;

		.price {
			color: #E33838;
			margin-left: 36rpx;
		}
	}
</style>
<style>
	@import "/common/css/reset.css";
</style>